<template>
  <div class="login-wrapper" :style="`background-image: url(${bgImg})`">
    <login-header />

    <div class="login-container">
      <div class="title-container">
        <h1 class="title margin-no">登录到</h1>
        <h1 class="title">{{ appTitle }}</h1>
        <div class="sub-title">
          <p class="tip">{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}</p>
          <p class="tip" @click="switchType(type == 'register' ? 'login' : 'register')">
            {{ type == 'register' ? '登录' : '注册新账号' }}
          </p>
        </div>
      </div>

      <login-form v-if="type === 'login'" @ok="ok" />
      <register v-else @register-success="switchType('login')" />
      <tdesign-setting />
    </div>

    <footer class="copyright">
      <beian />
    </footer>
  </div>
</template>
<script setup lang="ts">
import '@/components/Account/index.less';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { LoginForm } from '@/components';
import Register from './components/Register.vue';
import LoginHeader from './components/Header.vue';
import TdesignSetting from '@/components/SettingModal/index.vue';
import Beian from '@/components/Beian/index.vue';
import { appTitle } from '@/config/global';
import LocalWhiteBgImg from '@/assets/assets-login-bg-white.png';
import LocalBlackBgImg from '@/assets/assets-login-bg-black.png';
import configApi from '@/api/sysConfig';
import { getFileAccessUrl } from '@/soar';
import { useSettingStore } from '@/store';

const settingStore = useSettingStore();

const whiteBgImg = ref(LocalWhiteBgImg);
const blackBgImg = ref(LocalBlackBgImg);
const bgImg = computed(() => {
  if (settingStore.displayMode === 'dark') {
    return blackBgImg.value;
  }
  return whiteBgImg.value;
});

configApi.get('pc').then((res) => {
  if (res.loginBg) {
    whiteBgImg.value = getFileAccessUrl(res.loginBg);
  }
  if (res.loginDarkBg) {
    blackBgImg.value = getFileAccessUrl(res.loginDarkBg);
  }
});

const router = useRouter();
const route = useRoute();
const type = ref('login');
const switchType = (val: string) => {
  type.value = val;
};

function ok() {
  const redirect = route.query.redirect as string;
  const redirectUrl = redirect ? decodeURIComponent(redirect) : '/dashboard';
  router.push(redirectUrl);
}
</script>
<script lang="ts">
export default {
  name: 'LoginIndex',
};
</script>
